<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()
const router = useRouter()
const activeMenu = ref('vital_signs')

// 菜单列表
const menuItems = [
  { id: 'vital_signs', name: '生命体征记录表' },
  { id: 'body_composition', name: '身体成分记录表' },
  { id: 'blood_tests', name: '血液检测记录表' },
  { id: 'daily_activities', name: '日常活动记录表' },
  { id: 'health_assessments', name: '健康评估记录表' },
]

// 切换菜单
const switchMenu = (menuId) => {
  activeMenu.value = menuId
  router.push(`/index/${menuId}`)
}

// 登录
const login = () => {
  router.push('/login')
}

// 注册
const register = () => {
  router.push('/register')
}

// 退出
const logout = async () => {
  await userStore.logout()
  router.push('/login')
}

// 页面加载时获取用户信息
onMounted(async () => {
  console.log('首页加载，当前登录状态:', userStore.isLoggedIn)
  console.log('当前token:', userStore.token)
  
  if (userStore.isLoggedIn) {
    const result = await userStore.fetchUserInfo()
    console.log('获取用户信息结果:', result)
  }
})
</script>

<template>
  <div class="home-container">
    <!-- 顶部导航栏 -->
    <header class="header">
      <div class="logo">健康检测系统</div>
      <nav class="nav">
        <template v-if="userStore.isLoggedIn">
          <span class="welcome-text">欢迎, {{ userStore.userInfo?.username || '用户' }}!</span>
          <button @click="logout" class="nav-btn">退出</button>
        </template>
        <template v-else>
          <button @click="login" class="nav-btn">登录</button>
          <button @click="register" class="nav-btn">注册</button>
        </template>
      </nav>
    </header>

    <!-- 主内容区 -->
    <main class="main-content">
      <div class="layout-container">
        <!-- 侧边菜单 -->
        <aside class="sidebar">
          <ul class="menu-list">
            <li
              v-for="item in menuItems"
              :key="item.id"
              :class="['menu-item', { active: activeMenu === item.id }]"
              @click="switchMenu(item.id)"
            >
              {{ item.name }}
            </li>
          </ul>
        </aside>

        <!-- 右侧内容区 -->
        <div class="content-area">
          <router-view />
        </div>
      </div>
    </main>
  </div>
</template>

<style scoped>
.home-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background-color: #409eff;
  color: white;
}

.logo {
  font-size: 1.5rem;
  font-weight: bold;
}

.nav {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.welcome-text {
  margin-right: 1rem;
}

.nav-btn {
  padding: 0.5rem 1rem;
  background-color: white;
  color: #409eff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
}

.nav-btn:hover {
  background-color: #f0f0f0;
}

.main-content {
  flex: 1;
  overflow: auto;
}

.layout-container {
  display: flex;
  height: 100%;
}

.sidebar {
  width: 250px;
  background-color: #f5f5f5;
  border-right: 1px solid #ddd;
}

.menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu-item {
  padding: 1rem 1.5rem;
  cursor: pointer;
  border-bottom: 1px solid #ddd;
  transition: background-color 0.2s;
}

.menu-item:hover {
  background-color: #e0e0e0;
}

.menu-item.active {
  background-color: #409eff;
  color: white;
}

.content-area {
  flex: 1;
  padding: 1rem;
  background-color: white;
}
</style>